<template>
    <div class="boxs">
        <a-tabs v-model:activeKey="activeKey" type="card" :destroyInactiveTabPane="true">
            <a-tab-pane key="static" tab="项目统计">
                <div style="background-color: #ececec; padding: 20px;font-size: 25px;">
                    <a-row :gutter="16">
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">今日最高</span>
                                </template>
                                <p class="p">
                                    {{ maxData[0]?.value == 0 ? '无' : maxData[0]?.projectName + ":" }}
                                    <span v-if="maxData[0]?.value > 0" class="num">{{ maxData[3]?.value }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">昨日最高</span>
                                </template>
                                <p class="p">
                                    {{ maxData[1]?.value == 0 ? '无' : maxData[1]?.projectName + '：' }}
                                    <span v-if="maxData[1]?.value > 0" class="num">{{ maxData[3]?.value }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">本月最高</span>
                                </template>
                                <p class="p">
                                    {{ maxData[2]?.value == 0 ? '无' : maxData[2]?.projectName + '：' }}
                                    <span v-if="maxData[2]?.value > 0" class="num">{{ maxData[3]?.value }}</span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">上月最高</span>
                                </template>
                                <p class="p">
                                    {{ maxData[3]?.value == 0 ? '无' : maxData[3]?.projectName + "：" }}
                                    <span v-if="maxData[3]?.value > 0" class="num">{{ maxData[3]?.value }}</span>
                                </p>

                            </a-card>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16" style="margin-top: 10px;">
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">今日成交额</span>
                                </template>
                                <p class="p" v-for="item in data">
                                    {{ item.today_total != 0 ? item.project_name + '：' : '' }}
                                    <span v-if="item.today_total != 0" class="num"> {{ item.today_total }} </span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">昨日成交额</span>
                                </template>
                                <p class="p" v-for="item in data">
                                    {{ item.yesterday_total != 0 ? item.project_name + `：` : '' }}
                                    <span v-if="item.yesterday_total != 0" class="num"> {{ item.yesterday_total }} </span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">本月成交额</span>
                                </template>
                                <p class="p" v-for="item in data">
                                    {{ item.this_month_total != 0 ? item.project_name + `：` : '' }}
                                    <span v-if="item.this_month_total != 0" class="num"> {{ item.this_month_total }} </span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">上月成交额</span>
                                </template>
                                <p class="p" v-for="item in data">
                                    {{ item.last_month_total != 0 ? item.project_name + `：` : '' }}
                                    <span v-if="item.last_month_total != 0" class="num"> {{ item.last_month_total }} </span>
                                </p>

                            </a-card>
                        </a-col></a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="order" tab="商品项目">
                <div style='margin-bottom: 20px;'>
                    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                        @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item name="title" label="名称">
                                    <a-input v-model:value="formState[`title`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item name="grounding" label="是否上架">
                                    <a-radio-group v-model:value="formState['grounding']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="0">未上架</a-radio-button>
                                        <a-radio-button value="1">已上架</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="10" style="text-align: left">
                                <a-button type="primary" @click="adds">新增</a-button>

                            </a-col>
                            <a-col :span="14" style="text-align: right">
                                <a-button type="primary" html-type="submit">查询</a-button>
                                <a-button style="margin: 0 8px"
                                    @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                            </a-col>
                        </a-row>
                    </a-form>
                    <a-table bordered :data-source="dataSource" :columns="columns"
                        :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">

                        <template #bodyCell="{ column, text, record }">

                            <template v-if="column.dataIndex == 'illustrate'">
                                <a-tag color="purple" v-for="item in record?.illustrate?.split('|')">{{ item }}</a-tag>
                            </template>

                            <template v-if="column.dataIndex == 'grounding'">
                                <span :style="{ color: record.grounding != 0 ? 'green' : 'red' }">{{ record.grounding != 0 ?
                                    '已上架' : "未上架" }}</span>
                            </template>

                            <template v-if="column.dataIndex === 'operation'">
                                <a-popconfirm v-if="dataSource.length" :title="record.grounding != 0 ? '真的要下架吗?' : '确定要上架吗'"
                                    @confirm="confirm(record)">
                                    <a :style="{ color: record.grounding != 0 ? 'red' : 'green' }">{{ record.grounding != 0
                                        ? "下架" : "上架"
                                    }}</a>

                                </a-popconfirm>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="showModal(record.uid, 0)">详情</span>
                                <span style="margin-left: 15px;color:skyblue" @click="showModal(record.uid, 1)">修改</span>
                            </template>
                            <template v-if="column.dataIndex == 'image'">
                                <a-image :width="100" :heigth="150" :src='share.http + `/${record.dir}/${record.image}`' />
                            </template>
                        </template>
                    </a-table>
                    <div>
                        <a-modal v-model:visible="visible" title="项目信息" :width="1000">
                            <template #footer>
                                <a-button type="primary" @click="handleOk">确定</a-button>
                            </template>
                            <div class="conent">
                                <div class="info">
                                    <p>
                                        <span class="label">项目名称：</span>
                                        <span class="value">{{ danData[0]?.title }}</span>

                                    </p>
                                    <p>
                                        <span class="label">项目说明：</span>
                                        <a-tag color="purple" v-for="item in danData[0]?.illustrate?.split('|')">{{ item
                                        }}</a-tag>
                                    </p>
                                    <p>
                                        <span class="label">项目价格：</span>
                                        <span class="value">{{ danData[0]?.price }} (元)</span>
                                    </p>
                                    <p>
                                        <span class="label">已售数量：</span>
                                        <span class="value">{{ danData[0]?.soldout }}</span>
                                    </p>
                                    <p>
                                        <span class="label">服务时长：</span>
                                        <span class="value">{{ danData[0]?.service_time }}(分钟)</span>
                                    </p>
                                    <p>
                                        <span class="label">是否上架：</span>
                                        <span :style="{ color: danData[0]?.grounding != 0 ? 'green' : 'red' }">{{
                                            danData[0]?.grounding != 0 ?
                                            '已上架' : "未上架" }}</span>
                                    </p>
                                    <p>
                                        <span class="label">服务时长：</span>
                                        <span class="value">{{ danData[0]?.service_time }}(分钟)</span>
                                    </p>
                                    <p>
                                        <span class="label">详情：</span>
                                        <a-radio-group v-model:value="redioData" name="radioGroup">
                                            <a-radio :value="1">产品详情</a-radio>
                                            <a-radio :value="2">用户须知</a-radio>
                                        </a-radio-group>
                                    </p>
                                </div>
                                <a-image :src="share.http + `/${danData[0]?.dir}/${danData[0]?.image}`" alt="项目照片"
                                    :width="500" :height="250" style="margin-bottom: 10px;"></a-image>
                            </div>
                            <fwb :content="redioData != 1 ? fwbData[1] : fwbData[0]"></fwb>
                            <div style="margin-top: 20px;" v-if="danData[0].mp4_name">
                                <div style="font-size: 18px;color: #333;margin-bottom: 5px;">项目视频:</div>
                                <div style="display: flex;justify-content: space-between;align-items:center;">
                                    <video style="width: 33%;height: 170px;" controls
                                        :src="`${share.http}/${danData[0].mp4_dir}/${danData[0].uid}/${item}`"
                                        v-for="item in danData[0].mp4_name.split(',')"></video>
                                </div>
                            </div>
                        </a-modal>
                        <a-modal v-model:visible="changeData" title="项目信息" :width="850" @ok="setOk" :destroyOnClose="true">
                            <a-form ref="setForm" :model="setFormState" name="dynamic_rule">
                                <a-form-item label="项目名称" name="title" :rules="[{ required: true, message: '请输入名称' }]">
                                    <a-input v-model:value="setFormState.title" />
                                </a-form-item>

                                <a-form-item label="服务时长(分钟)" name="service_time"
                                    :rules="[{ required: true, message: '请输入服务时长!' }]">
                                    <a-input-number v-model:value="setFormState.service_time" :min="10" :max="1000" />
                                </a-form-item>
                                <a-form-item label="项目说明" name="illustrate"
                                    :rules="[{ required: true, message: '请输入说明!' }]">
                                    <a-select v-model:value="setFormState.illustrate" mode="tags"
                                        placeholder="Please select"></a-select>
                                </a-form-item>
                                <a-form-item label="项目价格" name="price" :rules="[{ required: true, message: '请输入价格!' }]">
                                    <a-input-number v-model:value="setFormState.price" prefix="￥" />
                                </a-form-item>
                                <a-form-item label="已售数量" name="soldout" :rules="[{ required: true, message: '请输入数量!' }]">
                                    <a-input-number v-model:value="setFormState.soldout" prefix="￥" />
                                </a-form-item>
                                <a-form-item label="是否上架" name="grounding"
                                    :rules="[{ required: true, message: '请选择是否上架!' }]">
                                    <a-radio-group v-model:value="setFormState.grounding" name="radioGroup">
                                        <a-radio value="1">上架</a-radio>
                                        <a-radio value="0">下架</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                                <a-form-item label="项目主图" name="image">
                                    <a-upload :fileList="fileListData" :maxCount="1" list-type="picture-card"
                                        :beforeUpload="beforeUp">
                                        <div>
                                            <plus-outlined />
                                            <div style="margin-top: 8px">Upload</div>
                                        </div>
                                    </a-upload>
                                </a-form-item>
                                <a-form-item label="项目视频" name="image">
                                    <a-upload :fileList="mp4Data" :maxCount="3" :multiple="true" list-type="picture-card"
                                        :beforeUpload="mp4BeforeUp" @remove="removeVideo">
                                        <div>
                                            <plus-outlined />
                                            <div style="margin-top: 8px">Upload</div>
                                        </div>

                                    </a-upload>
                                </a-form-item>
                                <a-form-item label="详情" :name="setRedio ? 'details' : 'know'">
                                    <a-radio-group v-model:value="setRedio">
                                        <a-radio :value="1">项目详情</a-radio>
                                        <a-radio :value="0">用户须知</a-radio>
                                    </a-radio-group>
                                    <div v-show="setRedio == 1">
                                        <fwb :content="setFormState.html" @setData="sethtml"></fwb>

                                    </div>
                                    <div v-show="setRedio == 0">
                                        <fwb :content="setFormState.knows" @setData="setknow"></fwb>
                                    </div>

                                </a-form-item>
                            </a-form>
                        </a-modal>
                    </div>

                </div>

            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { managementStaticAPI, imageAPI } from '../../../api/management';
import fwb from '../../../components/fwb.vue'
import { PlusOutlined } from '@ant-design/icons-vue';
import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { debounce } from 'lodash'


const activeKey = ref('static')
const uidData = ref('');
const router = useRouter();  //路由
const store = useUserData();    //pinia

const danData = ref([{}]);      //详情单条数据信息
const fwbData = ref([])         //详情富文本
const visible = ref(false);     //详情弹窗
const redioData = ref(1)        //详情选择富文本

const changeData = ref(false);  //修改窗口
const setForm = ref(null);      //修改表单的ref
const setFormState = ref({});  //修改时表单的数据
const beifen = ref({});         //进行备份以防取消
const setRedio = ref(1);      //显示用户须知还是详情
const status = ref(true);    //证明是修改操作还是新增操作
const fileList = ref('');  //文件保存地
const fileListData = ref([])  //文件展示区
const mp4Data = ref([]);    //视频展示区
const mp4List = ref([]);    //视频保存区
const mp4Img = ref([])
const mp4BeforeUp = (f) => {
    if (!mp4List.value.every(item => item.name != f.name)) {
        message.error("视频名称重复");
        return
    }
    if (!share.mp4List.includes(f.type)) {
        message.error("视频支持的格式有:" + share.mp4List);
        return;
    }
    if (mp4List.value.length == 3 || mp4Data.value.length == 3) {
        message.error("视频到达上线,最多三个!!");
        return;
    }

    // 调用 generateCoverImage 函数生成封面图像
    share
        .generateCoverImage(f)
        .then((res) => {
            const url = URL.createObjectURL(f); // 将生成的封面图像转换为 URL
            const resUrl = URL.createObjectURL(res);
            mp4Img.value.push(res);
            mp4List.value.push(f);
            mp4Data.value.push({ url, thumbUrl: resUrl, data: f });
        })
        .catch((err) => message.error(err));

    return false;
};

const removeVideo = (file) => {
    console.log(file);
    const index = mp4Data.value.indexOf(file);
    if (index !== -1) {
        mp4List.value = mp4List.value.filter(item => item != mp4Data.value[index]?.data);
        mp4Img.value = mp4Img.value.filter(item => item.name.substring(0, item.name.lastIndexOf('.')) != file.data.name.substring(0, file.data.name.lastIndexOf('.')));
        mp4Data.value.splice(index, 1);
    }
    console.log(mp4List.value, mp4Data.value, mp4Img.value);
}
const sethtml = (value) => {  //修改项目详情富文本
    setFormState.value.html = value;
}


const beforeUp = f => {               //上传图片前
    fileList.value = f;
    fileListData.value = [{ url: URL.createObjectURL(f) }]
    return false;
}

const setknow = (v) => {            //修改用户须知
    setFormState.value.knows = v;

}

const adds = () => {                //新增或修改
    changeData.value = true;
    setFormState.value = {};
    fileListData.value = [];
    fileList.value = '';
    mp4Data.value = [];
    mp4List.value = [];
    status.value = false;
    uidData.value = null;
}

const handleOk = (file) => {        //
    visible.value = false;

}

const setOk = async () => {   //点击修改完成
    if (status.value) {  //修改操作
        if (fileList.value) {  //当上传了文件
            let up = await imageAPI(`set|${setFormState.value.image}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);   //进行图片上传操作
            if (up.code != 200) {
                message.error(up.message);
                return
            } else {
                setFormState.value.image = up.file;
            }
        } else {          //当没有上传文件
            let up = await imageAPI(`noset|${setFormState.value.image}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (up.code == 400) {
                message.error(up.message);
                return
            }
        }
        console.log(mp4Data.value, mp4List.value, mp4Img.value);
        console.log(setFormState.value);
        if (mp4List.value.length > 0) {  //上传了视频
            mp4List.value = [...mp4List.value, ...mp4Img.value];
            let res = await imageAPI(`setMp4|${setFormState.value.uid}|${mp4Data.value.length > 0 ? mp4Data.value.map(item => item.url.substring(item.url.lastIndexOf("/") + 1)) : []}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, mp4List.value);
            console.log(res);
            if (res.code != 200) {
                message.error(res.message);
                return;
            } else {
                setFormState.value.mp4_name = res.data;
            }

        } else if (mp4List.value.length == 0 && mp4Data.value.length == setFormState.value.mp4_name.split(',').length) {  //没有发生改变
            //不需要请求

        } else {   //没有上传视频且原视频发生改变
            let res = await imageAPI(`setMp4|${setFormState.value.uid}|${mp4Data.value.length > 0 ? mp4Data.value.map(item => item.url.substring(item.url.lastIndexOf("/") + 1)) : []}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            console.log(res);
            if (res.code != 200) {
                message.error(res.message);
                return;
            } else {
                setFormState.value.mp4_name = res.data;
            }
        }
        console.log(setFormState.value.mp4_name);
        changeData.value = false;  //关闭窗口 触发富文本内容更新
        setTimeout(async () => {
            if (typeof setFormState.value.illustrate == 'string') setFormState.value.illustrate = setFormState.value.illustrate.split("|");
            (setFormState.value.illustrate.length > 1) && (setFormState.value.illustrate = setFormState.value.illustrate.join("|"))
            let data = Object.values(setFormState.value).join('@@@###');
            let ge = `@@@###${store.data.token}@@@###${store.data.uuid}@@@###${store.data.phone}`
            console.log(Object.values(setFormState.value));
            data += ge;
            console.log(data);
            let res = await managementStaticAPI(data);
            console.log(res);
            if (!res || res.code == 406) {   //没有返回值或者明确406 失效
                router.replace({ name: 'login' });
                message.error("账号失效", 3)
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }

            message.success("修改成功")
            pageClick();  //重新渲染数据

        }, 10);
    }
    else {   //新增项目操作
        setForm.value.validateFields()
            .then(async res => {
                if (fileList.value) {
                    let res = await imageAPI(`add|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);
                    console.log(res);
                    if (res.code != 200) {
                        message.error(res.message);
                        return;
                    } else {
                        setFormState.value.image = res.file;
                        setFormState.value.uid = res.uid;
                    }
                } else {
                    message.error("请上传一张主图片!!!")
                    return;
                }
                if (mp4List.value) {
                    mp4List.value = [...mp4List.value, ...mp4Img.value];
                    let res = await imageAPI(`addMp4|${setFormState.value.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, mp4List.value);
                    console.log(res);
                    if (res.code != 200) {
                        message.error(res.message);
                        return;
                    } else {
                        setFormState.value.mp4 = res.file;
                    }
                } else {
                    setFormState.value.mp4 = '';
                }
                changeData.value = false;
                setTimeout(async () => {
                    setFormState.value.pinyin = share.convertToPinyin(res.title);
                    setFormState.value.dir = 'projectDetails';
                    (setFormState.value.illustrate.length > 0) && (setFormState.value.illustrate = setFormState.value.illustrate.join("|"))
                    console.log(setFormState.value);

                    const { dir, grounding, html, illustrate, image, knows, pinyin, price, service_time, soldout, title, uid, mp4 } = setFormState.value
                    let data = [dir, grounding, html, illustrate, image, knows, pinyin, price, service_time, soldout, title, uid, mp4].join('@@@###');
                    let ge = `@@@###${store.data.token}@@@###${store.data.uuid}@@@###${store.data.phone}`
                    data += ge;
                    let re = await managementStaticAPI('add@@@###' + data);
                    console.log(re);
                    if (!re || re.code == 406) {   //没有返回值或者明确406 失效
                        router.replace({ name: 'login' });
                        message.error("账号失效", 3)
                        return;
                    } else if (re.code != 200) {
                        message.error(re.message);
                        return
                    }
                    message.success("添加")
                    pageClick();  //重新渲染数据
                })

            })

    }

}


const showModal = async (uid, num) => {
    status.value = true;  //证明是修改操作
    if (num) {
        changeData.value = true;
        if (uidData.value == uid) {
            setFormState.value.html = decodeURIComponent(setFormState.value.html);
            setFormState.value.knows = decodeURIComponent(setFormState.value.knows);
            return
        };
        setFormState.value = {};

    } else {
        visible.value = true;
    }
    fwbData.value = [];
    mp4List.value = [];
    mp4Data.value = [];
    let res = await managementStaticAPI(`selectDan|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)    //获取单条数据的详情数据

    console.log(res);
    if (!res || res.code == 406) {   //没有返回值或者明确406 失效
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message)
        return;
    }
    if (!num) {   //查看详情的富文本
        fwbData.value.push(res.html.replace(/"/g, ''));  //详情的数据
        fwbData.value.push(res.know.replace(/"/g, '')); //详情的富文本数据

    }

    num ? (setFormState.value = res.data[0]) : (danData.value = res.data);
    if (num) {
        setFormState.value.illustrate = setFormState.value.illustrate.split("|")
        setFormState.value.knows = res.know.replace(/"/g, '');
        setFormState.value.html = res.html.replace(/"/g, '');

        fileListData.value = [{ url: `${share.http}/${setFormState.value.dir}/${setFormState.value.image}` }]
        const mp4 = setFormState.value.mp4_name.split(',');
        if (mp4.length > 0 && mp4[0] !== '') {
            let mp4Sel = await imageAPI(`selMp4|${setFormState.value.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);

            if (mp4Sel.code !== 200) {
                message.error(mp4Sel.message);
                return;
            }

            mp4.forEach(item => {               //遍历视频加载到列表显示
                mp4Data.value.push({
                    url: `${share.http}/${setFormState.value.mp4_dir}/${setFormState.value.uid}/${item}`,
                    thumbUrl: `${share.http}/${setFormState.value.mp4_dir}/${setFormState.value.uid}/${mp4Sel.data.find(i => i.substring(0, i.lastIndexOf('.')) === item.substring(0, item.lastIndexOf('.')))}`
                });
            });
        }

        console.log(mp4Data.value);
        beifen.value = setFormState.value;   //进行一次备份
        uidData.value = setFormState.value.uid;
    }
    console.log(setFormState.value);
};

const dataSource = ref([{}]);

const columns = [{
    title: '项目标题',
    dataIndex: 'title',
    align: 'center'

}, {
    title: '图片',
    dataIndex: 'image',
    width: "100px",
    align: 'center'

}, {
    title: '说明',
    dataIndex: 'illustrate',
    align: 'center'

}, {
    title: "已售数量",
    dataIndex: 'soldout',
    align: 'center'

}, {
    title: '服务时长(分钟)',
    dataIndex: 'service_time',
    align: 'center'

}, {
    title: "是否上架",
    dataIndex: "grounding",
    align: 'center'

}, {
    title: "单价(元)",
    dataIndex: "price",
    align: 'center'

}, {
    title: '操作',
    dataIndex: 'operation',
    align: 'center'

}];


const totalCount = ref(0);      //总条
const pageSize = ref(8);       //一页多少条
const current = ref(1);         //当前页
const formState = reactive({
    title: '',
    grounding: '',
});
const formRef = ref('');  //查询的ref
const onFinish = () => {  //当点击查询

    pageClick();
}

const confirm = async (e) => {   //点击是否选择上下架
    let res = await managementStaticAPI(`changeMan|${e.uid}${e.grounding == 1 ? 0 : 1}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {   //没有返回值或者明确406 失效
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }

    pageClick({ current: current.value, pageSize: pageSize.value, total: totalCount.value });  //用户体验更好 点击下架或者上架就在当前页面进行数据刷新
}


const debouncedPageClick = debounce(async (item) => {               //防抖
    item ? current.value = item.current : current.value = 1;
    let res = await managementStaticAPI(`pmData|${pageSize.value}:${current.value}:${formState.grounding}:${formState.title}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {   //没有返回值或者明确406 失效
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
    console.log(res);
    totalCount.value = res.data[0]?.total - 0;
}, 300)

const pageClick = async (item) => {  //页面发生变化时 或者各种被调用
    debouncedPageClick(item);
}

const data = ref([]);
const maxData = ref([]);

onMounted(async () => {


    let res = await managementStaticAPI(`pm|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    let res2 = await managementStaticAPI(`pmData|${pageSize.value}:${current.value}::|${store.data.token}|${store.data.uuid}|${store.data.phone}`);

    if (!res || !res2 || res.code == 406 || res2.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200 || res2.code != 200) {
        message.error(res.message);
        return
    }
    data.value = res.data;

    dataSource.value = res2.data;
    totalCount.value = res2.data[0].total - 0;
    const maxValues = {
        today_total: { value: Number.MIN_VALUE, projectName: "" },
        yesterday_total: { value: Number.MIN_VALUE, projectName: "" },
        this_month_total: { value: Number.MIN_VALUE, projectName: "" },
        last_month_total: { value: Number.MIN_VALUE, projectName: "" }
    };

    res.data.forEach(obj => {
        for (const key in maxValues) {
            const value = parseFloat(obj[key]);
            if (!isNaN(value) && value > maxValues[key].value) {
                maxValues[key].value = value;
                maxValues[key].projectName = obj.project_name;
            }
        }
    });


    for (const key in maxValues) {
        const value = maxValues[key].value === 5e-324 ? 0 : maxValues[key].value;
        maxData.value.push({ field: key, value, projectName: maxValues[key].projectName });
    }

})
</script>

<style scoped src="../../css/management/product.scss"></style>